<template>
  <div>
      <el-container style="height: 500px;">
          <el-aside width="150px">
              <el-menu @select="handleclsSelect" default-active="0">
                  <el-menu-item index="0">全部</el-menu-item>
                  <el-menu-item :index="emitem.name" :key="index" v-for="(emitem,index) in clsMenus">{{emitem.name}}</el-menu-item>
              </el-menu>
          </el-aside>
          <el-container style="overflow: hidden;">
              <el-main style="overflow: hidden;">
                  <vxe-grid :columns="tableColumn" :display-pager="false" :pager-config="tablePage" :proxy-config="tableProxy" @cell-dblclick="vxselect" border height="498px" highlight-current-row highlight-hover-row ref="ddlrptunitTable" resizable size="mini" stripe></vxe-grid>
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>
<script>

export default {
  data() {
      return {
          fulldata: null,
          groupid: "0",
          clsMenus: [],
          tableColumn: [],
          tablePage: {
              pageSize: 1000
          },
          tableProxy: {
              index: true, // 启用动态序号代理
              // 配置响应的数据属性
              props: {
                  result: "data.result",
                  total: "data.page.total"
              },
              ajax: {
                  // page 对象： { pageSize, currentPage }
                  query: param => {
                      let _this = this;
                      return new Promise((s, f) => {
                          var collist = [];
                          for (let i = 0, len = this.fulldata.Cols.length; i < len; i++) {
                              const item = this.fulldata.Cols[i];
                              let colitem = {
                                  field: item.field,
                                  title: item.title,
                                  width: item.width
                              };
                              collist.push(colitem);
                          }
                          this.tableColumn = collist;

                          //根据groupid过滤

                          let cData = this.fulldata.Data;
                          if (this.groupid != "0") {
                              cData = cData.filter(item => item.labgroupname === this.groupid);
                          }
                          //分页
                          // var pagedData = cData.slice((param.page.currentPage - 1) * param.page.pageSize, param.page.currentPage * param.page.pageSize);
                          s({ data: { page: { total: cData.length }, result: cData } });
                      });
                  }
              }
          }
      };
  },
  computed: {},
  methods: {
      handleclsSelect: function(key, keyPath) {
          this.groupid = key;
          this.$refs.ddlrptunitTable.commitProxy("query");
      },
      loadAllData: function() {
          this.$tool
              .request({
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: "instrument",
                      groupid: this.groupid
                  }
              })
              .then(res => {
                  // console.log("res", res);
                  this.fulldata = res;
                  this.seloptions = this.fulldata.Data;
                  //左边分类
                  // console.log("array");
                  let clsArray = [];
                  for (let i = 0; i < this.fulldata.Data.length; i++) {
                      let cfData = this.fulldata.Data[i];

                      if (
                          clsArray.find(x => {
                              return x.name === cfData.labgroupname;
                          }) == undefined
                      ) {
                          let citem = { name: cfData.labgroupname, seq: cfData.seq2 };
                          clsArray.push(citem);
                      }

                      clsArray.sort(function(a, b) {
                          return a.seq - b.seq;
                      });
                      this.clsMenus = clsArray;
                  }
                  this.$refs.ddlrptunitTable.commitProxy("query");
              })
              .catch(e => {
                  console.log("erro", e);
                  f(e);
              });
      },
      vxselect: function(data, evt) {
          this.$emit("change", data.row.instrid, data.row.instrname);
          this.$emit("changeObj", {code:data.row.instrid, name:data.row.instrname, row:''});
      }
  },
  mounted() {
      this.loadAllData();
  }
};
</script>
<style scoped>
.el-aside {
  color: #333;
  border: solid #cccccc;
  border-width: 1px 0 1px 1px;
  background-color: #f5f5f5;
}
.el-menu {
  border: none;
  background-color: #f5f5f5;
}
.el-main {
  padding: 0;
}
</style>
